不定高度动态元素height CSS3过渡动画

Posted on | In

摘要

这是一篇关于小程序扩展效果的制作

  1. 小程序view点击扩展效果
  2. view点击扩展动画效果

小程序view点击扩展效果

遇到了一个业务需求，活动报名人数如果过多的话，只显示前两行头像，如图

image

这个十分的简单，只要通过点击事件改变它的style就好，我这里是这么写的

html
1
2
3
<view class="content_portrait {{extend?'content_portrait_extend':''}}">
    // 中间元素省略
</view>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 元素未扩展 */
.content_portrait {
  width: 710rpx;
  height: 172rpx;  
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
}

/* 元素已扩展 */
.content_portrait_extend {
  height: auto;
  overflow: auto;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
openExtend: function () {
  this.setData({
    extend: true
  })
},
closeExtend: function () {
  this.setData({
    extend: false
  })
}

view点击扩展动画效果

如果扩展的时候有个过度效果的话那用户体验可以说是非常舒服了。

但是这里遇到了点问题。就是我们的高度不确定的，扩展完毕之后的高度是auto。但是如果队列最后边高度是auto的话，animation并不能实现动画效果，怎么办呢？

于是这里我想了一个办法，我们可以用 max-height。毕竟 max-height 是支持 transition动画的。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content_portrait_extend {
  height: auto;
  overflow: auto;
  animation: animat_extend 2s linear;   /* 展开时调用 animation动画队列*/
}

@keyframes animat_extend {
  0% {
    max-height: 172rpx;
  }

  100% {
    max-height: 1720rpx;
  }
}

这样就实现点击扩展时出现动画效果了，弊端在于如果中间元素大于max-height的话，那超出部分无法显示了，而且动画时长会根据max-height确定，所以动画时长也得慢慢调试。